<template>
  <div class="bottom-bar">

    <!--全选-->
    <div class="check-content">
      <check-button
        class="check-button"
        :is-checked="isSelectAll" @click.native="selectAll"/>
      <span>全选</span>
    </div>

    <!--总价-->
    <div class="totalPrice">
      总价：￥{{totalPrice}}
    </div>

    <!--去结算-->
    <div class="check-out" @click="checkOut">
      去结算({{checkCount}})
    </div>

  </div>
</template>

<script>
import CheckButton from "../../../components/common/checkButton/CheckButton";
export default {
  name: "CartBottomBar",
  components:{
    CheckButton
  },
  data(){
    return {
      // 用来储存总数量
      counter: 0
    }
  },
  computed:{


    // 总价
    totalPrice(){
      // 返回符合的数组
      return this.$store.state.cartList.filter(item=>{
        // 参数函数的条件是checked为true
        return item.checked
        // 计算总价，x是参数函数返回的值，z是下一个对象
      }).reduce((x, z)=>{
        return x + z.price * z.count
      },0).toFixed(2)
    },

    // 结算
    checkCount(){
      // 筛选出已经选中的
      return this.$store.getters.cartList.filter(item => item.checked).length
    },

    //判断是否满足全选
    isSelectAll(){
      if (this.$store.state.cartList.length === 0) return false
      //利用filter，返回list里checked为F的数组，然后取其长度，然后取反，如果有的话取反为F，没有的话取反为T
      // return !this.$store.state.cartList.filter(item=> !item.checked).length
      //但是性能不是很高

      //find，找false
      // return !this.$store.state.cartList.find(item => !item.checked)

      //使用every最简单 使用指定函数检测数组中的所有元素
      return this.$store.state.cartList.every(item => item.checked)

    }
  },
  methods:{
    //全选按钮
    selectAll(){
      //如果是全选中
      if (this.isSelectAll){
        //全部取消
        this.$store.state.cartList.forEach(item => item.checked = false)
      } else { //部分或者全部未选中
        this.$store.state.cartList.forEach(item => item.checked = true )
      }
    },

    //结算
    checkOut(){
      //判断是否有商品被选中
      if (this.$store.state.cartList.some(item => item.checked)) {
        //有选中的
        this.$toast.show('正在结算中，请稍等',2000)
      }else {
        //没有被选中的提示
        this.$toast.show('请选择购买的商品', 2000)

      }



}

  }
}
</script>

<style scoped>
  .bottom-bar{
    /*这个flex是针对全选、总价这几个不同的版块*/
    display: flex;
    position: relative;

    height: 40px;
    /*行间高度*/
    line-height: 40px;
    font-size: 14px;

    background-color: #f1f1f1;
  }
  .check-content{
    /*这个flex是针对button里的图片和文字*/
    display: flex;
    /*居中对齐个弹性盒*/
    align-items: center;
    margin-left: 10px;
    width: 60px;
  }
  .check-button{
    width: 20px;
    height: 20px;
    /*因为没法控制对号图片的位置，所以是设为20，把整行调到中间来*/
    line-height: 20px;
    margin-right: 6px;
  }
  .totalPrice{
    margin-left: 30px;
    flex: 1;
  }
  .check-out{
    width: 80px;
    background-color: #fd8099;
    color: #f2f2f2;
    text-align: center;
  }

</style>
